<template>
  <view class="pho-option flexWrap">
    <view
      v-if="imgList && imgList.length > 0"
      class="pho-show"
      @click="prevImag(index)"
      v-for="(item, index) in imgList"
      :key="index"
    >
      <image :src="item" mode=""></image>
      <icon
        type="clear"
        size="16"
        class="delete"
        @click.stop="deletePhoto(index)"
      ></icon>
    </view>
    <view
      class="pho-add"
      v-if="imgList.length < limit"
      @click="uploadType('image')"
    >
      <image src="@/static/images/manage/addphoto.png" mode=""></image>
      <view class="">点击上传</view>
    </view>
    <choose-modal ref="modal" @getVal="getVal"></choose-modal>
  </view>
</template>

<script>
import chooseModal from "@/components/choose-modal";
import config from "@/config/index.js";
export default {
  components: {
    chooseModal,
  },
  props: {
    limit: {
      type: Number,
      default: 1,
    },
    previewImg: {
      type: String,
      default: "",
    },
    ltSize: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      imgList: [],
      type: "",
      recordType: ["album"],
      platform: uni.getSystemInfoSync().platform,
    };
  },
  watch: {
    previewImg: {
      handler(newVal, oldVal) {
        console.log(newVal, "watch监听");
        this.imgList = newVal ? newVal.split(",") : [];
      },
    },
  },
  methods: {
    getVal(val) {
      if (val !== "0") {
        this.recordType = val === "2" ? ["album"] : ["camera"];
        this.type === "image" && this.chooseImage();
      }
    },
    uploadType(type) {
      if (this.platform === "android") {
        this.type = type;
        this.$refs.modal.open();
      } else {
        this.recordType = ["camera", "album"];
        type === "image" && this.chooseImage();
      }
    },
    chooseImage() {
      uni.chooseImage({
        count: 1, // 最多可以选择的图片张数，默认9
        sourceType: this.recordType,
        success: (res) => {
          let filePath = res.tempFilePaths[0];
          let fileObj = res.tempFiles[0];
          // 图片类型
          if (!/\.(png|jpg|jpeg)$/i.test(filePath)) {
            this.msg("请上传PNG、JPG、JPEG格式的图片", { duration: 2000 });
            return;
          }
          if (fileObj.size > this.ltSize * 1024 * 1024) {
            this.msg(`图片不能大于${this.ltSize}M`, { duration: 2000 });
            return;
          }
          // 上传图片
          uni.showLoading({
            title: "上传中",
          });
          const baseUrlWeiXin = config.apibaseUrlWeiXin;
          uni.uploadFile({
            url: `${baseUrlWeiXin}${this.$API.manage.upload.uploadImage}`,
            filePath: filePath,
            name: "file",
            header: {
              "X-Access-Token": uni.getStorageSync("Token"),
            },
            success: (res) => {
              const data = JSON.parse(res.data);
              if (data.success) {
                this.imgList.push(data.result);
                this.$emit("imageChange", this.imgList.join(","));
              }
            },
            fail: () => {
              console.log("上传商品主图失败");
            },
            complete: () => {
              uni.hideLoading();
            },
          });
        },
      });
    },
    deletePhoto(index) {
      this.imgList.splice(index, 1);
      this.$emit("imageChange", this.imgList ? this.imgList.join(",") : "");
    },
    prevImag(current) {
      uni.previewImage({
        current: current,
        urls: this.imgList,
      });
    },
  },
  upload() {},
};
</script>

<style lang='scss' scoped>
.pho-option {
  + .pho-option {
    margin-left: 20rpx;
  }
}

.pho-add {
  width: 210rpx;
  height: 210rpx;
  background-color: $uni-bg-color-add;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10rpx;

  image {
    width: 81rpx;
    height: 74rpx;
    margin-bottom: 24rpx;
  }

  text {
    font-size: 28rpx;
    font-weight: 400;
    color: $uni-text-color;
  }
}

.pho-show {
  width: 210rpx;
  height: 210rpx;
  margin: 0 30rpx 30rpx 0;
  position: relative;
  border-radius: 10rpx;

  image {
    object-fit: contain;
    border-radius: 10rpx;
    background: #e5e5e5;
  }

  .delete {
    position: absolute;
    top: 3rpx;
    right: 3rpx;
  }
}

.pho-show:nth-child(3n) {
  margin-right: 0;
}
</style>
